<template>
  <div class="pos">
    <div class="el-input_head">
      <el-input
        placeholder="输入职位信息"
        suffix-icon="el-icon-plus"
        class="posAddInput el-input_add"
        v-model="pos.name"
        @keydown.enter.native="addPosition"
      ></el-input>
      <el-button type="primary" icon="el-icon-plus" @click="addPosition"
        >添加</el-button
      >
      <el-button
        type="danger"
        :disabled="this.multipleSelectionPos == 0"
        @click="dpPosBatchDelete"
        >批量刪除</el-button
      >
    </div>
    <div>
      <el-table
        :data="positions"
        stripe
        border
        class="posTable el-table perBorder"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="50" type="selection"> </el-table-column>
        <el-table-column prop="id" label="id" width="80" sortable>
        </el-table-column>
        <el-table-column prop="name" label="职位" width="200">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建时间"
          width="200"
          sortable
        >
        </el-table-column>
        <el-table-column prop="enabled" label="是否启用" width="100">
          <template slot-scope="scope">
            <!--                        <el-switch :value="scope.row.enabled" disabled></el-switch>-->
            <el-tag type="success" v-if="scope.row.enabled">启用</el-tag>
            <el-tag type="danger" v-else>未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="medium"
              @click="showEditPosView(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="medium"
              type="danger"
              @click="doPosDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="编辑职位" :visible.sync="dialogFormVisible" width="30%">
      <div class="updateDialogInfo">
        <el-tag>职位名称</el-tag>
        <el-input
          v-model="updatePos.name"
          class="updateDialogInput el-update_input"
        ></el-input>
        <el-tag>是否启用</el-tag>
        <el-switch
          v-model="updatePos.enabled"
          class="updateDialogInput el-update_input"
        ></el-switch>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doPosUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PosMana",
  data() {
    //这里存放数据",
    return {
      //页面添加职位输入框内容
      pos: {
        name: ""
      },
      //后端获取的职位信息
      positions: {},
      //编辑内容弹窗默认不可见
      dialogFormVisible: false,
      //更新的职位信息
      updatePos: {
        name: "",
        enabled: ""
      },
      //checkbox勾选的行内数据
      multipleSelectionPos: []
    };
  },
  //方法集合",
  methods: {
    //初始化职位信息
    initPositions() {
      this.getRequest("/system/basic/pos/").then(resp => {
        if (resp) {
          this.positions = resp;
        }
      });
    },
    //添加职位信息
    addPosition() {
      if (this.pos.name) {
        this.postRequest("/system/basic/pos/", this.pos)
          .then(resp => {
            if (resp) {
              this.initPositions();
              this.pos.name = "";
            }
          })
          .catch(() => {});
      } else {
        this.$message.error("职位名称不能为空");
      }
    },
    //更新职位信息
    doPosUpdate() {
      this.putRequest("/system/basic/pos/", this.updatePos)
        .then(resp => {
          if (resp) {
            this.initPositions();
            this.dialogFormVisible = false;
          }
        })
        .catch(() => {});
    },
    //更新职位信息，弹窗中数据绑定
    showEditPosView(index, data) {
      this.dialogFormVisible = true;
      Object.assign(data.enabled, this.updatePos.enabled);
      //复制数据的方法，防止弹窗中和页面的数据在输入时同时更新，解除二者关联性
      Object.assign(this.updatePos, data);
      this.updatePos.createDate = "";
    },
    //删除职位信息
    doPosDelete(index, data) {
      this.$confirm(
        "此操作将永久删除 [" + data.name + "] 职位,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      )
        .then(() => {
          this.deleteRequest("/system/basic/pos/" + data.id).then(resp => {
            if (resp) {
              this.initPositions();
            }
          });
        })
        .catch(() => {});
    },
    //checkbox多选时将数据存起来
    handleSelectionChange(val) {
      this.multipleSelectionPos = val;
    },
    //批量删除职位
    dpPosBatchDelete() {
      this.$confirm(
        "此操作将永久删除 [" +
          this.multipleSelectionPos.length +
          "] 个职位,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      ).then(() => {
        //后端请求的就是数组
        let ids = [];
        this.multipleSelectionPos.forEach(item => {
          ids.push(item.id);
        });
        //那就直接给后端传数组，拼接字符串反倒会404 Bad Request 失败。
        //tips:有一个前端序列化的插件，qs => npm install qs -S
        this.deleteRequest("/system/basic/pos/", ids).then(resp => {
          if (resp) {
            this.initPositions();
          }
        });
      });
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    //初始化页面，挂载信息
    this.initPositions();
  }
};
</script>

<style>
.posAddInput {
  width: 180px;
}

.posTable {
  width: 855px;
}

.pos .updateDialogInfo {
  width: 300px;
  margin: 0 auto;
}
.pos .updateDialogInput {
  width: 200px;
}
</style>
